<template>
      <div>
          <ul class="list">
            <li
              v-for="item in letters"
              :key="item"
              :ref="item"
              @click="cityClick"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd"
            >
              {{item}}
            </li>
          </ul>
      </div>
</template>
<script>
    export default {
        name: "Aside",
        props:{
            aside:Object
        },
        data () {
            return {
              touchStatus:false, //定义开关
              startY:0,
              timer:null
          }
        },
       computed:{
            //将aside对象转为数组  方便后面的传参
           letters () {
               const letters=[];
               for(let i in this.aside){
                 letters.push(i);
               }
               return letters;
           }
       },
        updated () {//当页面数据发生改变  而且渲染完成的时候执行
          this.startY=this.$refs['B'][0].offsetTop;//获得A距离最上面div的距离
        },
        methods:{
          cityClick(e){
            // console.log(e.target.innerText);
            //向父组件传值  使用$emit();
            this.$emit("change",e.target.innerText);
          },
          handleTouchStart(){//手指按下
            this.touchStatus=true;
          },
          handleTouchMove(e){//手指移动  实现城市的切换
           if(this.timer){
             clearTimeout(this.timer);
           }
           this.timer=setTimeout(()=>{ //函数截留
             if(this.touchStatus){
               const touchY=e.touches[0].clientY-76;//获得当前触发点到最上面div的距离
               const index=Math.floor((touchY-this.startY)/20);//计算出当前触发点的下标
               if(index >= 0 && index<this.letters.length){
                 this.$emit('change',this.letters[index]);
               }
             }
           },100)
          },
          handleTouchEnd(){ //手指抬起
            this.touchStatus=false;
          }
        }
    }
</script>

<style scoped lang="stylus">
   .list{
      width:.2rem;
      position :absolute;
      top:.76rem;
      right:0;
      bottom:0;
      display :flex;
      flex-direction:column;
      justify-content :center;
      li{
        text-align :center;
        font-size :.16rem;
         line-height:.2rem;
        color:#00bcd4;
      }
   }
</style>
